<template>
    <el-breadcrumb separator="/" class="bread">
      <el-breadcrumb-item
        v-for="item in navs"
        :key="item.path"
        :class="{ active: item.path === activePath }"
        @click.native="navigateTo(item.path)"
      >
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activePath: this.$route.path
      };
    },
    computed: {
      navs() {
        console.log('路由信息：', this.$route.matched);
        let routes = this.$route.matched;
        if (routes.length > 0) {
          routes[0].path = '/';
        }
        return routes;
      }
    },
    methods: {
      navigateTo(path) {
        if (this.$route.path !== path) {
          this.activePath = path;
          this.$router.push({ path }).catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              throw err;
            }
          });
        }
      }
    },
    watch: {
      $route(to) {
        this.activePath = to.path;
      }
    },
    created() {
      console.log(this.$route.matched);
    }
  };
  </script>
  
  <style lang="less">
  .bread {
    margin-bottom: 10px;
  }
  
  .bread .active {
    font-weight: bold;
    color: #15497c; /* 高亮颜色，你可以根据需要修改 */
  }
  </style>
  